<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <base th:href="@{/}">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="../static/css/style.css" th:href="@{/css/style.css}"/>
</head>
<body>

<head class="panelBar" th:replace="/common/header::header"></head>

<div class="container mt-5">

    <form th:action="@{/goods/query}" method="get">

        <div>
            <label for="name"></label>
            <input type="text" class="form-control" id="name" name="name" th:value="${dto.name}" placeholder="搜索商品名">
            <button id="submitBtn" class="btn btn-primary" type="submit" data-dismiss="modal">查询</button>
            <button id="advanceSearch" type="button" class="btn btn-primary" data-toggle="modal" data-target="#advancedSearchModal">
                高级查询
            </button>

            <label for="page" id="pageLabel">页码:</label>
            <input type="number" class="form-control" id="page" name="page" th:value="${dto.page}" min="1" th:max="${num != 0 ? (num + dto.pageNum - 1) / dto.pageNum : 1}">

            <label for="pageNum" id="pageNumLabel">每页数量:</label>
            <select class="form-control" id="pageNum" name="pageNum" th:value="${dto.pageNum}">
                <option th:selected="${dto.pageNum == 12}" value="12">12</option>
                <option th:selected="${dto.pageNum == 21}" value="21">21</option>
                <option th:selected="${dto.pageNum == 30}" value="30">30</option>
            </select>


        </div>

        <div class="modal fade" id="advancedSearchModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h3 class="modal-title" id="modalLabel">高级查询</h3>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="priceStart">价格起始:</label>
                            <input type="number" class="form-control" id="priceStart" name="priceStart" min="0" th:value="${dto.priceStart}">
                        </div>
                        <div class="form-group">
                            <label for="priceEnd">价格结束:</label>
                            <input type="number" class="form-control" id="priceEnd" name="priceEnd" min="1" th:value="${dto.priceEnd}">
                        </div>
                        <div class="form-group">
                            <label for="stockStart">库存起始:</label>
                            <input type="number" class="form-control" id="stockStart" name="stockStart" min="0" th:value="${dto.stockStart}">
                        </div>
                        <div class="form-group">
                            <label for="stockEnd">库存结束:</label>
                            <input type="number" class="form-control" id="stockEnd" name="stockEnd" min="1" th:value="${dto.stockEnd}">
                        </div>
                        <div class="form-group">
                            <label for="desc">排序方式:</label>
                            <select class="form-control" id="desc" name="desc" th:value="${dto.desc}">
                                <option th:selected="${dto.desc == 1}" value="1">降序</option>
                                <option th:selected="${dto.desc == 0}" value="0">升序</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="orderBy">排序字段:</label>
                            <select class="form-control" id="orderBy" name="orderBy" th:value="${dto.orderBy}">
                                <option th:selected="${dto.orderBy == 'id'}" value="id">上架时间</option>
                                <option th:selected="${dto.orderBy == 'name'}" value="name">名称</option>
                                <option th:selected="${dto.orderBy == 'price'}" value="price">价格</option>
                                <option th:selected="${dto.orderBy == 'stock'}" value="stock">库存</option>
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" data-dismiss="modal" style="width: 100%; height: 80px">确定</button>
                    </div>
                </div>
            </div>
        </div>

    </form>
</div>


<div class="container mt-4">
    <div class="row">
        <div th:each="good : ${goods}" class="col-md-4 mb-4">
            <div class="card">
                <img class="card-img-top" th:src="${good.image}" alt="Product Image" style="width: 100%; max-height: 300px;">
                <div class="card-body">
                    <h5 class="card-title" th:text="${good.name}">Product Name</h5>
                    <p class="card-text" th:text="${'￥' + good.price + 'CNY'}">Price</p>
                    <p class="card-text" th:text="${'Stock: ' + good.stock}"></p>
                    <a th:href="@{/goods/detail/{id}(id=${good.id})}" class="btn btn-primary btn-block">购买</a>
                </div>
                <br>
            </div>
        </div>
    </div>
</div>

<head class="panelBar" th:replace="/common/footer::footer"></head>

</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</html>